Nderfaqja grafike
Pasi perfunduam fazen e projektimit me sukses, tashme duhet te zbatojme ne praktike skicat dhe skemat qe planifikuam. Ne kete seksion do te flasim ne lidhje me konvertimin e shablloneve grafike ne kod HTML dhe CSS. Kjo faze perben implementimin e nderfaqeve grafike, te cilat do te jene statike. Ne perfundim te kesaj faze do te kemi faqe te ndertuara HTML dhe CSS, qe mund te renderizohen nga brouseri por do te jene statike, dmth. nuk do te jete produkt final pasi te gjitha te dhenat do te jene te shkruajtura direkt ne HTML dhe jo te marra nga nje databaze.
Per implementimin e nderfaqeve grafike do te perdorim nje framework te quajtur Bootstrap aktualisht versioni 3.3.7. Bootstrap eshte nje framework HTML, CSS, dhe JS i cili na ndihmon qe te ndertojme nje websajt responsive edhe per mobile dhe tablet. Duke importuar kete framework ne mund te perdorim disa klasa te gatshme dhe ti vendosim ne etiketat HTML ne menyre qe ato te renderizohen ne menyren me te mire te mundshme. Gjithashtu Bootstrap permban komponente te gatshme te cilat mjafton ti perdorim ne faqet tona dhe jane funksional. Per me shume ne lidhje me kete framework mund te merrni informacion ne faqen aktuale zyrtare http://getbootstrap.com/.
Per te implementuar nderfaqet ne HTML dhe CSS normalisht jemi bazuar mbi skicat grafike qe realizuam ne fazen e projektimit. Fillimisht krijojme nje dokument te ri HTML duke perfshire ne etiketen <head> importimet e nevojshme:
<!DOCTYPE html>
<html>
<head>
<title>Fakulteti i Teknologjise se Informacionit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Stili qe do te krijojme ne: -->
<link rel="stylesheet" href="/assets/css/style.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Do te renderizohet permbajtja e faqes duke perfshire header - content - footer -->
</body>
</html>
Pervec frameworkut Bootstrap kemi importuar edhe jQuery pasi eshte i nevojshem qe te mirefunksionoje Bootstrap-i. Imazhet apo skedaret e ndryshem si p.sh. style.css do ti grupojme ne nje folder te quajtur assets. Imazhet ne folderin assets/img/ ndersa stilin ne folderin assets/css/. Ne kodin me lart kemi importuar stilin <link rel="stylesheet" href="/assets/css/style.css">. Skedari style.css do te mbaje te gjithe stilin qe do te krijojme ne per te arritur ne paraqitjen e deshiruar te faqes.
Brenda etiketes <body> do te vendosen header, content (permbajtja) dhe footer. Header dhe footer do te jete i njejte per te gjitha faqet mjafton qe t'a krijojme njehere ne fillim. Ndersa content do te jete e ndryshueshme per secilen faqe. Fillimisht do te shpjegojme header-in dhe footer-in, me pas do te shpjegojme content-in per secilen faqe.
Header
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Renderizimi i logos: -->
<a href="/index.php"><img src="/assets/img/logo.jpg"/></a>
</div>
</div>
</div>
</header>
<div class="menu">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav id="navbar-top" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse no-pd" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- Elementet e menuse: -->
<li><a href="/index.php">KREU</a></li>
<li><a href="/about.php">RRETH FTI</a></li>
<li><a href="/notices.php">NJOFTIME</a></li>
<li><a href="/articles.php">LAJME</a></li>
<li><a href="/contact.php">KONTAKT</a></li>
</ul>
<!-- Forma e kerkimit: -->
<form method="post" action="/articles.php" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control search-input input-sm"
placeholder="Kerko">
<div class="input-group-btn">
<button class="btn btn-default btn-sm"><i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Elementi djathtas i menuse: -->
<ul class="nav navbar-nav navbar-right">
<li><a href="/login.php">HYR</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
Ne HTML-ne e mesiperme kemi perdorur komponentet grid te Bootstrap per ta ndare faqen ne kolona. Bootstrap ka gjithsej 12 kolona, dhe ne kete rast i kemi perdorur te dymbedhjeta duke perdorur klasen col-md-12. Kemi perdorur komponentin navbar te Bootstrap per te renderizuar nje menu responsive. Per t'i dhene ngjyre background-it apo per te vendosur disa stile te personalizuara shtojme disa rreshta CSS ne skedarin style.css.
@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i,700,700i');
body {
font-family: 'Raleway', sans-serif;
background-color: #eee4db;
}
ul {
list-style-type: none;
}
a:focus, a:hover {
text-decoration: none;
}
header {
background-color: #860000;
padding: 20px 0;
}
.menu {
background-color: #860000;
box-shadow: 0 0 10px 0 black;
position: absolute;
width: 100%;
}
.navbar-default {
background-color: #860000;
border-color: #860000;
margin: 0;
z-index: 10;
min-height: 20px;
}
.navbar-default .search-input {
border-radius: 0;
line-height: 23px;
font-size: 13px;
text-align: right;
}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
font-size: 13px;
padding: 13px;
color: #fff !important;
background-color: transparent !important;
}
Te specifikuara edhe ne kerkesat e projektit kemi perdorur fontin Raleway, si ngjyre primare per shume element kemi perdorur #860000, ndersa per background-in e te gjithe faqes kemi perdorur ngjyren sekondare #eee4db. Ngjyra sekondare do te mbivendoset kur te vendosim ngjyren primare ne komponente te ndryshme te faqes. Pas renderizimit te kodit te mesiperm ne brouser do te marrim pamjen e meposhtme te header-it.
Footer
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="copyright">
Copyright © 2010-2017 Universiteti Politeknik i Tiranës (UPT)<br/>
Fakulteti i Teknologjisë së Informacionit (FTI)<br/>
Sheshi Nënë Tereza 4, Tiranë<br/>
Telefon: +355.42.278159
</p>
</div>
</div>
</div>
</footer>
Po ashtu footer-i do te zere 12 kolona te rrjetes se Bootstrap, pra hapesire te plote sa madhesia e brouserit. Ne footer jane vendosur informacione te vogla rreth fakultetit. Na duhet te shtojme disa rreshta stil ne skedarin style.css ne menyre qe te renderizohet sa me bukur.
footer p.copyright {
text-align: center;
border-top: 5px solid #860000;
padding: 10px 0;
font-size: 13px;
color: #860000;
}
Eshte vendosur nje border ne krye te footerit dhe si ngjyre teksti eshte vendosur ngjyra primare.
Faqja kryesore KREU
Pasi perfunduam shpjegimin e header-it dhe footer-it, le te kalojme ne shpjegimin e content-it te faqeve me radhe. Kodi qe do te paraqesim perfshin vetem pjesen ndermjet header-it dhe footer-it. Duhet te keni kujdes sepse ne menyre qe te renderizohet faqja e plote ju duhet te bashkoni kodet e mesiperme qe u parashtruan, dhe ndermjet tyre te vendosni content-in te cilin do ta shpjegojme me poshte.
<div id="content">
<div class="container">
<div class="row">
<!-- Perdorim 8 kolona per renderizimin e pjeses se majte -->
<div class="col-sm-8 left-content">
<div class="main-image">
<!-- Imazhi kryesor ne qender te faqes -->
<img src="/assets/img/studentet.jpg"/>
</div>
<div class="row">
<div class="col-sm-12 col-md-4 side-options">
<!-- Lista e departamenteve -->
<ul>
<li><a href="#">Departamenti i Elektronikës dhe Telekomunikacionit</a></li>
<li><a href="#">Departamenti i Inxhinierisë Informatike</a></li>
<li><a href="#">Departamenti i Bazave të Informatikës</a></li>
</ul>
</div>
<!-- Kolona e pare e njoftimeve -->
<div class="col-md-4 news-row">
<div class="border"></div>
<!-- Lista e njoftimeve -->
<div class="news-item">
<h3 class="news-title">Njoftim në lidhje me zhvillimin e mësimit në mjediset e godinës së re të FTI</h3>
<p class="news-content"><a href="#">Njoftim në lidhje me zhvillimin e mësimit në ambjentet e godinës së re të FTI...</a></p>
</div>
<div class="news-item">
<h3 class="news-title">Njoftim në lidhje me zhvillimin e mësimit në mjediset e godinës së re të FTI</h3>
<p class="news-content"><a href="#">Njoftim në lidhje me zhvillimin e mësimit në ambjentet e godinës së re të FTI...</a></p>
</div>
</div>
<!-- Kolona e dyte e njoftimeve -->
<div class="col-md-4 news-row no-pd-left">
<div class="border"></div>
<!-- Lista e njoftimeve -->
<div class="news-item">
<h3 class="news-title">Njoftim në lidhje me zhvillimin e mësimit në mjediset e godinës së re të FTI</h3>
<p class="news-content"><a href="#">Njoftim në lidhje me zhvillimin e mësimit në ambjentet e godinës së re të FTI...</a></p>
</div>
<div class="news-item">
<h3 class="news-title">Njoftim në lidhje me zhvillimin e mësimit në mjediset e godinës së re të FTI</h3>
<p class="news-content"><a href="#">Njoftim në lidhje me zhvillimin e mësimit në ambjentet e godinës së re të FTI...</a></p>
</div>
</div>
</div>
</div>
<!-- Perdorim 4 kolona per renderizimin e pjeses se djathte, pjesa e lajmeve -->
<div class="col-sm-4 no-pd-left side-archive">
<!-- Titulli modulit te lajmeve -->
<h5 class="side-arkiva">LAJME</h5>
<!-- Lista e lajmeve, aktualisht 1 lajm i vetem -->
<div class="col-md-12 news-item">
<!-- Titulli i lajmit -->
<h3 class="news-title">Artikull në lidhje me zhvillimin e mësimit në mjediset e godinës së re të FTI</h3>
<!-- Permbajtja e lajmit -->
<p class="news-content"><a href="#">Artikull në lidhje me zhvillimin e mësimit në ambjentet e godinës së re të FTI...</a></p>
</div>
</div>
</div>
</div>
</div>
Per secilin nga modulet e mesiperme keni komentin perbri. Me poshte listojme disa rreshta qe duhen shtuar ne skedarin style.css ne menyre qe te kemi nje renderizim sa me te bukur te moduleve.
#content {
margin-top: 60px;
margin-bottom: 10px;
}
/* Stili per imazhin ne qender: */
.main-image img {
width: 100%;
border: 1px solid lightgrey;
padding: 5px;
}
/* Stili per listen e departamenteve: */
.side-options ul {
margin: 0;
padding: 0;
text-align: center;
}
.side-options ul li {
padding: 10px;
background-color: #909090;
margin-top: 10px;
border: 1px solid #870000;
}
.side-options ul li.active {
background-color: #860000;
}
.side-options ul li a, .side-options ul li a:hover {
color: #fff;
text-align: center;
text-decoration: none;
}
/* Stili per lajmet dhe njoftimet: */
.news-row .border {
margin-top: 10px;
border-top: 3px solid #860000;
}
.news-item {
margin-bottom: 25px;
}
.news-item h3.news-title {
font-size: 15px;
color: #860000;
font-weight: 600;
}
.news-item p.news-content a {
font-size: 13px;
}
.news-item p.news-content a:hover {
text-decoration: none
}
h5.side-arkiva {
font-size: 15px;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #860000;
}
.left-content {
background-color: #eee4db;
}
Nga renderizimi i content-it perfitojme pamjen e meposhtme. Normalisht faqja e plote permban header dhe footer.
Faqja RRETH FTI
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-12 left-content">
<div class="row">
<div class="col-sm-12 no-pd pg-content">
<!-- Titulli i faqes: -->
<h3 class="pg-title">RRETH FTI</h3>
<!-- Informacione rreth FTI: -->
<div class="pg-description">
<p>Në dhjetor 2007 u krijua Fakulteti i Teknologjisë së Informacionit mbi bazën e tre
deparatamenteve:
<ul>
<li>1- Departamenti i Elektronikës dhe Telekomunikacionit (nga bashkimi i seksoneve
të Elektronikës dhe të Telekomunikacionit).
</li>
<li>2- Departamenti i Inxhinierisë Informatike (në përbërje të të cilit është edhe
seksioni i informatikës ish pjesë e Departamentit të Matematikës).
</li>
<li>3- Qëndra për kërkim dhe zhvillim të teknologjisë së informacionit, grupi i ish
INIMA-s.
</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Shtojme rreshtat e meposhtme ne skedarin style.css:
.pg-content {
background-color: #eee4db;
}
.pg-description {
padding: 15px;
text-align: left;
}
.pg-content .pg-title {
margin: 10px 15px;
padding: 5px;
font-size: 14px;
line-height: 22px;
font-weight: 600;
color: #860000;
background-color: #a6a6a6;
text-align: center;
text-transform: uppercase;
}
Faqja e renderizuar paraqitet ne vijim. Ne imazhin e meposhtem eshte perfshire header dhe footer.
Faqja NJOFTIME
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-12 left-content">
<div class="row">
<!-- Titulli i faqes -->
<h5 class="side-arkiva">NJOFTIME</h5>
<div class="col-sm-12 col-md-3 side-options">
<!-- Lista e departamenteve -->
<ul>
<li><a href="#">Departamenti i Elektronikës dhe Telekomunikacionit</a></li>
<li><a href="#">Departamenti i Inxhinierisë Informatike</a></li>
<li><a href="#">Departamenti i Bazave të Informatikës</a></li>
</ul>
</div>
<!-- Lista e Njoftimeve -->
<div class="news-item col-md-3">
<h3 class="news-title">Njoftim në lidhje me zhvillimin e mësimit në mjediset e godinës
së re të FTI</h3>
<p class="news-content"><a href="#">Njoftim në lidhje me zhvillimin e mësimit në
ambjentet e godinës së re të FTI...</a></p>
</div>
<div class="news-item col-md-3">
<h3 class="news-title">Njoftim në lidhje me zhvillimin e mësimit në mjediset e godinës
së re të FTI</h3>
<p class="news-content"><a href="#">Njoftim në lidhje me zhvillimin e mësimit në
ambjentet e godinës së re të FTI...</a></p>
</div>
<div class="news-item col-md-3">
<h3 class="news-title">Njoftim në lidhje me zhvillimin e mësimit në mjediset e godinës
së re të FTI</h3>
<p class="news-content"><a href="#">Njoftim në lidhje me zhvillimin e mësimit në
ambjentet e godinës së re të FTI...</a></p>
</div>
<!-- Fundi i listes se njoftimeve -->
</div>
</div>
</div>
</div>
</div>
Renderizohet faqja e meposhtme:
Te njejtin lloj kodi perdor edhe faqja LAJME vetem se ndryshon titulli i faqes, dhe permbajtja e listes:
Faqja KONTAKT
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-12 left-content">
<div class="col-md-8 col-md-offset-2">
<!-- Forma e kontaktit -->
<form role="form" id="contact">
<fieldset class="kontakt">
<legend>Na kontaktoni</legend>
<span>* Fushat e detyruara</span>
<div class="form-group">
<label>Emri juaj: *</label>
<input type="text" class="form-control " name="emri" required>
</div>
<div class="form-group">
<label>E-mail juaj: *</label>
<input type="email" class="form-control " name="email" required>
</div>
<div class="form-group">
<label>Mesazhi juaj: *</label>
<textarea name="mesazhi" class="form-control" rows="5"></textarea>
</div>
<input type="submit" name="dergo" value="Dergo" class="btn btn-default"/>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
Shtojme disa rreshta ne skedarin style.css per stilizimin e formes se kontaktit:
fieldset.kontakt legend {
width: auto;
padding: 2px;
margin: 0;
margin-left: 20px;
font-weight: 600;
}
fieldset.kontakt {
border: 1px solid #a8a8a8;
border-radius: 10px;
padding: 10px;
}
fieldset.kontakt span {
font-size: 10px;
}
Faqja qe renderizohet:
Faqja LOGIN
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-12 left-content">
<form method="POST">
<div class="login-block">
<h1>Login</h1>
<input type="text" value="" placeholder="Email" id="email"/>
<input type="password" value="" placeholder="Password" id="password"/>
<button>Hyr</button>
</div>
</form>
</div>
</div>
</div>
</div>
Kjo faqe permban formen per futjen e kredencialeve per autentikim. Per nje paraqitje sa me te bukur shtojme disa rreshta CSS ne skedarin style.css:
/* Login Form*/
.login-block {
width: 320px;
padding: 20px;
background: #fff;
border-radius: 5px;
border-top: 5px solid #860000;
margin: 0 auto;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#email {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#email:focus {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password:focus {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px bottom no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #860000;
}
.login-block button {
width: 100%;
height: 40px;
background: #860000;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #860000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
outline: none;
cursor: pointer;
}
.login-block button:hover {
background: #860000;
}
Faqja qe renderizohet:
Faqja e panelit te administrimit
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-3 pg-left-content">
<!-- Menuja ne krah te majte e panelit te administrimit -->
<ul class="pages-left">
<li><a href="/admin/profile.php">Kreu</a></li>
<li><a href="/admin/user_list.php">Perdoruesit</a></li>
<li><a href="/admin/article_list.php">Lajmet</a></li>
<li><a href="/admin/notice_list.php">Njoftimet</a></li>
</ul>
</div>
<div class="col-sm-9 no-pd pg-content">
<!-- Titulli i faqes -->
<h3 class="pg-title">Paneli i Administrimit</h3>
<div class="pg-description">
<h3 class="text-center">Mire se Erdhe</h3>
<hr style="border-color: #860000">
<h3 class="text-center"><strong>Alban Afmeti</strong></h3>
</div>
</div>
</div>
</div>
</div>
Per stilizim shtojme disa rreshta CSS:
/* Menuja e majte */
ul.pages-left {
margin: 0;
padding: 0;
}
ul.pages-left li {
padding: 3px;
background-color: #860000;
border: 1px solid #000;
margin: 5px 5px;
text-align: center;
}
ul.pages-left li.active {
background-color: #eee4db;
}
ul.pages-left li.active a {
color: #860000;
}
ul.pages-left li a {
font-size: 12px;
color: #fff;
}
Faqja e renderizuar:
Faqe te tjera
E njejta ide eshte ndjekur edhe me faqet e tjera te cilat sherbejne per menaxhimin e njoftimeve, lajmeve ose perdoruesve. P.sh. me poshte shfaqet kodi HTML per ndertimin e faqes se shtimit te nje perdoruesi:
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-3 pg-left-content">
<!-- Menuja ne krah te majte e panelit te administrimit -->
<ul class="pages-left">
<li><a href="/admin/profile.php">Kreu</a></li>
<li><a href="/admin/user_list.php">Perdoruesit</a></li>
<li><a href="/admin/article_list.php">Lajmet</a></li>
<li><a href="/admin/notice_list.php">Njoftimet</a></li>
</ul>
</div>
<div class="col-sm-9 no-pd pg-content">
<h3 class="pg-title">Perdorues i ri</h3>
<div class="pg-description col-md-6 col-md-offset-3">
<form method="post">
<div class="form-group">
<label for="emri">Emri:</label>
<input type="text" name="emri" class="form-control" id="emri">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" class="form-control" id="email"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" id="password"/>
</div>
<div class="form-group">
<label for="password_c">Konfirmo:</label>
<input type="password" name="password_conf" class="form-control" id="password_c"/>
</div>
<div class="form-group">
<label>Tipi</label>
<div class="checkbox">
<label><input type="radio" name="tipi"> Admin</label>
<label><input type="radio" name="tipi"> Pedagog</label>
</div>
</div>
<div class="form-group">
<label>Departamenti</label>
<select class="form-control" name="id_departament">
<option>Departamenti i Inxhinierise Informatike</option>
<option>Departamenti i Elektronikes dhe Telekomunikacionit</option>
</select>
</div>
<button type="submit" class="btn btn-default pull-right">Ruaj</button>
</form>
</div>
</div>
</div>
</div>
</div>
Faqja e renderizuar:
Per ndertimin e faqes se shtimit te nje lajmi eshte perdorur kodi i meposhtem HTML:
<div id="content">
<div class="container">
<div class="row">
<div class="col-sm-3 pg-left-content">
<!-- Menuja ne krah te majte e panelit te administrimit -->
<ul class="pages-left">
<li><a href="/admin/profile.php">Kreu</a></li>
<li><a href="/admin/user_list.php">Perdoruesit</a></li>
<li><a href="/admin/article_list.php">Lajmet</a></li>
<li><a href="/admin/notice_list.php">Njoftimet</a></li>
</ul>
</div>
<div class="col-sm-9 no-pd pg-content">
<h3 class="pg-title">Lajm i ri</h3>
<div class="pg-description">
<form method="post">
<div class="form-group">
<label for="titulli">Titulli:</label>
<input type="text" name="titulli" class="form-control" id="titulli">
</div>
<div class="form-group">
<label for="pershkrimi">Pershkrimi:</label>
<textarea name="pershkrimi" class="form-control" id="pershkrimi"></textarea>
</div>
<button type="submit" class="btn btn-default">Ruaj</button>
</form>
</div>
</div>
</div>
</div>
</div>
Faqja e renderizuar:
Te njejten ide ndjekin edhe faqet e tjera. Per kodin e plote te ketyre faqeve, si dhe per zhvillimet qe do te behen ne vazhdim, libri do te shoqerohet me te gjithe kodin e perdorur brenda tij per ilustrimet e ndryshme ose per projektin e plote.